import { Meta, Canvas } from '@storybook/addon-docs';

<Meta title="Design system/Cards" />

# Cards

## Default Card

### Base Card

The default card interface is used when pulling out an inline-form or other dialogue control.

By default the card will not have any shadow when laid on top of the background.

<Canvas>
  <div class="bg-white rounded p-md border border-gray-300">
    This is a card component.
  </div>
</Canvas>

### Nested Cards

A shadow is used to elevate a nested card within its parent card.

This is a card component with a nested inner-card.

<Canvas>
  <div class="bg-white rounded p-md mt-md shadow border border-gray-300">
    This is a nested card found within a parent card.
  </div>
</Canvas>

## Indicator Card

### Indicator Cards

Cards can also be used in conjunction with an indication state.

By default cards should use the `info` state if using an indicator.

This is a card component with an `info` indication state.

<Canvas>
  <div class="bg-white rounded p-md mb-sm border border-gray-300 border-l-4 border-l-green-600">
    This is a card component with an `positive` indication state.
  </div>
  <div class="bg-white rounded p-md border border-gray-300 border-l-4 border-l-red-600">
    This is a card component with an `negative` indication state.
  </div>
</Canvas>

### Indicator Cards w/ Icons

Indicator cards can also have circle indicators for iconography describing the message which they contain.

This can help use the card system as a form of inline-notification.

<Canvas>
  <div class="flex items-center bg-white rounded p-md mb-sm border border-gray-300 border-l-4 border-l-secondary">
    <div class="flex items-center justify-center h-xl w-xl rounded-full bg-indigo-100 mr-md">
      <svg
        class="w-6 h-6 text-blue-800 fill-current"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
      </svg>
    </div>
    <div>
      <p class="m-0 font-semibold">Card headline goes here</p>
      <p class="m-0 text-muted">Card copy goes here...</p>
    </div>
  </div>
</Canvas>

<Canvas>
  <div class="flex items-center bg-white rounded p-md mb-sm border border-gray-300 border-l-4 border-l-green-600">
    <div class="flex items-center justify-center h-xl w-xl rounded-full bg-green-100 mr-md">
      <svg
        class="w-6 h-6 text-green-800 fill-current"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path>
      </svg>
    </div>
    <div>
      <p class="m-0 font-semibold">Card headline goes here</p>
      <p class="m-0 text-muted">Card copy goes here...</p>
    </div>
  </div>
  <div class="flex items-center bg-white rounded p-md mb-sm border border-gray-300 border-l-4 border-l-red-600">
    <div class="flex items-center justify-center h-xl w-xl rounded-full bg-red-100 mr-md">
      <svg
        class="w-6 h-6 text-red-800 fill-current"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path d="m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z"></path>
      </svg>
    </div>
    <div>
      <p class="m-0 font-semibold">Card headline goes here</p>
      <p class="m-0 text-muted">Card copy goes here...</p>
    </div>
  </div>
</Canvas>
